<template>
  <div class="admin-layout">
    <div class="admin-layout__aside">
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :default-active="activeMenu"
      >
        <el-menu-item index="1" @click="setActiveMenu(1)">
          <i class="el-icon-menu"></i>
          <span slot="title">数据统计</span>
        </el-menu-item>
        <el-menu-item index="2" @click="setActiveMenu(2)">
          <i class="el-icon-s-goods"></i>
          <span slot="title">商品管理</span>
        </el-menu-item>
        <el-menu-item index="3" @click="setActiveMenu(3)">
          <i class="el-icon-s-check"></i>
          <span slot="title">订单管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="admin-layout__content">
      <div class="header">
        {{ '商品管理' }}
      </div>
      <div class="main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, watch } from '@vue/composition-api';
import { useNav } from '../../hooks';
import { RouterMap } from '../../utils/constants';

export default defineComponent({
  setup(props, context) {
    const activeMenu = ref('1');
    const { to } = useNav(context);

    const setActiveMenu = (index) => {
      activeMenu.value = String(index);
    };

    watch(activeMenu, (val) => {
      const routeMap = {
        1: RouterMap.Dashboard,
        2: RouterMap.GoodsManage,
        3: RouterMap.OrderManage,
      };
      to(routeMap[Number(val)]);
    });

    return {
      activeMenu,
      setActiveMenu,
    };
  },
});
</script>

<style lang="less" scoped>
.admin-layout {
  display: flex;
  &__aside {
    width: 250px;
    min-height: 100vh;
    background: #545c64;
  }

  &__content {
    flex: 1;
    .header {
      color: #000;
      box-sizing: border-box;
      width: 100%;
      padding: 20px 30px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
    }
    .main {
      padding: 1.5rem;
    }
  }
}
</style>
